<template>
    <!-- 过渡动画 -->
    <transition name="fade">
        <div class="img-view" @click="bigImg">
            <div class="img">

                <div class="operate">
                    <div>
                        <span @click.stop="rotateLeft">左旋转</span>
                        <span @click.stop="rotateRight">右旋转</span>
                        <span @click.stop="lookOriginal">查看原图</span>
                       <!-- <input type="text" class="content" @click.stop="">-->
                    </div>
                </div>
                <img :src="imgSrc" :style="transformStyle" >
            <!--    <img src="./../assets/images/test.jpg">-->
            </div>
        </div>
    </transition>
</template>
<script>
  export default {
    data(){
      return {
        transformStyle: {
          transform: 'rotate(0deg)'
        },
        angle:0
      }
    },
    props: ['imgSrc'],
    methods: {
      bigImg() {
        // 发送事件
        this.$emit('clickit')
      },
      rotateLeft(){
        this.angle =this.angle-90;
        this.transformStyle = {
          transform: 'rotate('+this.angle+'deg)'
        }
      },
      rotateRight(){
        this.angle =this.angle+90;
        this.transformStyle = {
          transform: 'rotate('+this.angle+'deg)'
        }
      },
      lookOriginal(){
            this.transformStyle = {
              transform: 'rotate(0deg)'
            }
        }
    }
  }
</script>
<style  type="text/scss" lang="scss" scoped>
    /*动画*/
    .fade-enter-active,
    .fade-leave-active {
        transition: all 0.5s linear;
        transform: scale(1);
    }

    .fade-enter, .fade-leave-active {
        transform: scale(0)
    }

    .img-view {
        position: absolute;
        left: 0;
        top:0;
        z-index: 1200;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        .img{
            z-index: 1201;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            img{
                display: block;
                border: none;
            }
            .operate{
                position: absolute;
                width: 100%;
                text-align: center;
                background: #666;
                bottom: 0;
                height: 60px;
                display: flex;
                justify-content: center;
                align-items: center;
                span{
                   float: left;
                    width: 80px;
                    height: 40px;
                    border-radius: 20px;
                    text-align: center;
                    line-height: 40px;
                    background: #FFFFFF;
                    cursor: pointer;
                    margin-right: 10px;
                }
                  .content{
                     float: left;
                     width: 200px;
                     height: 30px;
                     margin-top: 5px;
                };
            }

        }
    }



</style>